<template>
    <el-container>
    <el-header class="list_head">
      <div class="head_title fl">
        <div class="title_text">电影大数据分析系统-电影分类</div>
      </div>
      <!-- <div class="head_back fr">
        <div class="back_search">
          <div class="search_input fl">
            <el-input
            placeholder="搜索电影..."
            class="input"
            v-model="searchInput"
            @focus="focus"
          >
          </el-input>
          </div>
          <div class="search_button fr"><el-button style="height:3.5vh" @click="search()"><el-icon><Search/></el-icon></el-button>  
          </div>    
        </div>
      </div> -->
    </el-header>
    <el-main class="list_main">
      <div class="main_back1 fl">
      <el-button plain @click="$router.push('/')">主页</el-button>
      </div>

      <div class="main_back2 fl">
      <el-button plain @click="back()">返回</el-button>
      </div>
  
      <el-backtop :right="100" :bottom="100" />
      <div class="container">
      <div class="left_bar">
          <div class="film_container point" @click="todetail(item.id)" v-for="item in films" :key="item">
              <div>
                <el-image :src= "item.imagePath" style="width: 100px; height: 100px" :fit="contain" />
              </div>
              <div>
                  <div class="film_name">
                    <div class="chinese_name">{{ item.name }}</div>
                    <div class="eng_name">本名：{{ item.engName }}</div>
                  </div>
                  <div class="film_director">
                    <div>导演：{{ item.director }}</div>
                    <div style="margin-left:10px">编剧：{{ item.scriptwriter }}</div>
                  </div>
                  <div class="film_actor">演员：{{ item.actor }}</div>
                  <div class="film_type">
                      <div>{{ item.type }}</div>
                      <div style="margin-left: 20px;">{{ item.releaseDate }}</div>
                  </div>
              </div>
          </div>
      </div>
      <div class="right_bar">
        <h4 v-for="item in kinds" :key="item" class="typecss" @click="clickType(item)">
          {{item}}
        </h4>
      </div>
      </div>
    </el-main>
    <el-footer class="list_foot">
      <div class="foot_page"><el-pagination
      :page-size="20"
      :current-page.sync="pageNow"
      layout="prev, pager, next"
      background
      @current-change="handleCurrentChange"
      :total="typetotals">
      </el-pagination>
    </div>
    </el-footer>
  </el-container>
    </template>
  
    <script>
      import {Search} from "@element-plus/icons-vue"
      import {ref} from 'vue'
      import {type,types,typetotal} from "../api/index.js";
      import { ElPagination } from 'element-plus'
      export default {
        components:{
           Search,
        },
        data () {
          return {
            kinds:[],
            typetotals:0,
            typetotalsparam:{
              params:{
                type:''
              }
            },
            films:[""],
            searchInput:'',
            pageparam:{params:
              {current:1}},
            searchparam:{
              params:{
                 val:'地球',
                 current:1
              }
            },
            clickMovieParam:{
              params:{
                movieId:251
              }
            },
            typeSearchParam:{
              params:{
                 current:1
              }
            },
            pageNow: 1,  //当前页数
            article_content: [1,2,3,4], //内含5个对象的数组, 格式在下面介绍
            article_page: 4,   //用article_content.length, 根据数据量自动增页
  
            }
        },
        methods: {
          back(){
            let pageparam=JSON.parse(localStorage.getItem('pageNow'));
            this.$router.push('/FilmList?pageparam='+pageparam)          
          },
          todetail(param){
            localStorage.setItem('pageNow', JSON.stringify(this.pageNow))
            this.$router.push('/FilmDetail?id='+param+'&currentpage='+this.pageparam.params.current)
          },
          async gettypes(){
            this.kinds = await types()
          },
        //   async searchmovies(params){
        //     this.films = await search(params)
        //   },
          async searchmoviesBytype(movieType){
            this.films = await type(movieType,this.typeSearchParam)
          },
          async gettypetotal(param){
            this.typetotals = await typetotal(param)
          },
          handleCurrentChange(val) {
            this.typeSearchParam.params.current = val
            this.pageNow = val
            this.searchmoviesBytype(this.typetotalsparam.params.type)
          },
          search(){
            this.searchparam.params.val = this.searchInput
            this.searchmovies(this.searchparam)
          },
          
          clickType(movieType){
           this.films=this.searchType(movieType)   
           this.pageNow = 1
           this.typeSearchParam.params.current = 1
           this.typetotalsparam.params.type=movieType
           this.typetotals=this.gettypetotal(this.typetotalsparam)
        //    localStorage.setItem('typetotals', JSON.stringify(this.typetotals))
        //    this.typetotals = JSON.parse(localStorage.getItem('typetotals'))
           this.$router.push('/TypeList?movieType='+movieType) 
          },
          searchType(movieType){
            this.films=this.searchmoviesBytype(movieType)
          }
        },
        created(){
           this.searchType(this.$route.query.movieType)
          //  console.log(this.films)
           this.typetotalsparam.params.type=this.$route.query.movieType
           this.typetotals=this.gettypetotal(this.typetotalsparam)   
           this.gettypes()    
        },
      }
    </script>
  
    <style scoped>
  .container{
    padding-left: 100px;
    padding-top: 5%;
    padding-bottom: 5%;
    min-height: 120vh;
    display: flex;
  }
  .left_bar{
    width: 85%;
    min-height: 145vh;
    background-color:#fff;
    border-radius: 0.5%;
    padding-top: 40px;
    padding-bottom: 40px;
    padding-right: 5%;
  }
  .right_bar{
    width: 8%;
    height: auto;
    max-height: 50vh; 
    background-color:#fff;
    border-radius: 3%;
    margin-left: 8%;
    margin-right: 4%;
    padding-left: 2%;
    padding-right: 2%;
    display: flex;
    flex-wrap:wrap;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .film_container{
    margin-left:8%;
    margin-top: 40px;
    display: flex;
  }
  .film_name{
    font-size:18px;
    font-weight:800;
    display: -webkit-box;
    margin-left: 50px;
    display: flex;
  }
  .chinese_name{
    width:200px;
    height: 23px;
    overflow:hidden;
    text-align: left;
  }
  .eng_name{
    margin-left:15px;
    font-size:15px;
    overflow: hidden;
    display:-webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }
  .film_director{
    font-size:12px;
    margin-left: 50px;
    display: flex;
    margin-left: 50px;
    margin-top: 8px;
  }
  .film_actor{
    font-size:12px;
    margin-left: 50px;
    margin-top: 8px;
    overflow: hidden;
    display:-webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }
  .film_type{
    display:flex;
    font-size:10px;
    margin-left: 50px;
    margin-top: 8px;
    color: grey;
  }
  .list_head{
      width:100%;
      height:100px;
      padding:0px;
      min-width: 1366px;
      background-color:rgb(159, 159, 159);
    }
    .list_head .head_title{
      height: 100%;
      width:700px;
      position: relative;
    }
    .list_head .head_title .title_text{
      left:2%;
      top:30%;
      font-family: 'b';
      font-size:40px;
      color:#e24a4a;
      position: absolute;
      font-weight: 800;
      text-shadow:4px 4px pink;
    }
    .list_head .head_back{
      height:100%;
      width:600px;
      position:relative;
    }
    .list_head .head_back .back_search{
      height: 100%;
      position: relative;
    }
    .search_input{
      width:80%;
      height:3.5vh;
      padding-top: 6%;
    }
    .search_button{
      height:3.5vh;
      width:20%;
      padding-top: 6%;
    }
    .list_main{
      background-color:lightgrey;
      padding:0px;
      height: auto;
      width: 100%;
      min-width: 1366px;
      position:relative;
      /* position: fixed; */
      /* overflow: hidden; */
    }
    .list_main .main_back1{
      height:50px;
      width:100px;
      position: absolute;
      left:6%;
      top:20px;
    }
    .list_main .main_back2{
      height:50px;
      width:100px;
      position: absolute;
      left:12%;
      top:20px;
    }
    .list_foot{
      width:100%;
      height:80px;
      background-color:lightgrey;
      position: relative;
      min-width: 1366px;
    }
    .list_foot .foot_page{
      width:70%;
      height:40%;
      position: absolute;
      left:8%;
    }
    .search{
      width:60%;
      margin-left: 20%;
      height: 5vh;
      margin-top:5%;
      display: flex;
    }
    .point{
      cursor: pointer;
    }
    .typecss{
      margin:5% 0% 0% 10%;
      height: auto;
    }
    .typecss:hover {
      color: lightgrey;
      margin:5% 0% 0% 10%;
      height: auto;
      cursor: pointer;
    }
    </style>